import { useState, useEffect } from 'react';

// Helper hook to check for large screens (e.g., lg breakpoint in Tailwind)
const useIsLargeScreen = () => {
  // Use 1024px as the breakpoint for 'lg' in Tailwind
  const mediaQuery = "(min-width: 1024px)";
  const [isLarge, setIsLarge] = useState(() => window.matchMedia(mediaQuery).matches);

  useEffect(() => {
    const mql = window.matchMedia(mediaQuery);

    const handler = (event: MediaQueryListEvent) => {
      setIsLarge(event.matches);
    };

    // Add listener for changes
    mql.addEventListener('change', handler);

    // Cleanup listener on component unmount
    return () => mql.removeEventListener('change', handler);
  }, []);

  return isLarge;
};

export default useIsLargeScreen;
